body {
     background: linear-gradient(45deg,#333,#333);
     color: #333;
}
.one-content{
    width: 200px;
    overflow: hidden;  /* 超出的文本隐藏 */
    text-overflow: ellipsis; /* 溢出用省略号显示 */
    white-space: nowrap; /* 溢出不换行 */
    line-height: 50px;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
}

.out-board{
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 200px;
}

.two-content{
    display:-webkit-box; /* 弹性伸缩盒子模型 */
    -webkit-box-orient:vertical;  /* 非标准特性，是水平还是垂直布局其内容。 */
    /* -webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数.
    只有在display属性设置成-webkit-box或者-webkit-inline-box
    并且-webkit-box-orient属性设置成vertical时才有效果，表示显示的行数 */
    -webkit-line-clamp:2; 
    overflow: hidden;  /* 超出的文本隐藏 */
    text-overflow: ellipsis; /* 溢出用省略号显示 */
}
.multi-line-content{
    display:-webkit-box; /* 弹性伸缩盒子模型 */
    -webkit-box-orient:vertical;  /* 非标准特性，是水平还是垂直布局其内容。 */
    /* -webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数.
       只有在display属性设置成-webkit-box或者-webkit-inline-box
       并且-webkit-box-orient属性设置成vertical时才有效果，表示显示的行数 */
    -webkit-line-clamp:3; 
    overflow: hidden;  /* 超出的文本隐藏 */
    text-overflow: ellipsis; /* 溢出用省略号显示 */
}